<!DOCTYPE html>

<html>
<head>
    <title>#{get 'title' /}</title>
    <meta charset="utf-8">
    <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}">
    #{get 'moreStyles' /}
    <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
    <script src="@{'/public/javascripts/jquery-1.5.2.min.js'}" type="text/javascript" charset="utf-8"></script>
    <!-- Form tools: Dateinput, Rangeinput and Validator. No jQuery library. (5.68 Kb) -->
    <script src="http://cdn.jquerytools.org/1.2.5/form/jquery.tools.min.js"></script>
    #{get 'moreScripts' /}
</head>

    #{if currentUser ?: yes}
    <div id="demo-helper" style="${userRole == 'Club' ? 'background-color: #00FF00;' : 'background-color: #FF0000;'} color: #FFFFFF; font-size: 160%; text-align: center; padding: 15px">
        <!-- This is just for demoing purposes so the audience is not confused
        whether we are logged in as a Club admin or retailer -->
        
        You are a ${userRole}, ${currentUser.userName}

    </div>
    #{/ if}

<div id="site-wrapper">

    <div id="header">

        <div id="top">

            <div class="left" id="logo">
                <a href="@{Application.index()}">
                    <img src="@{'/public/images/logo.png'}" />
                </a>
            </div>

            #{get 'mainnavi' /}
            
            <div class="right" id="login">
		    #{if currentUser}
		      <p>
                #{if userRole == 'Club'}
                    Welcome club <a class="connectedUser" href="@{Profile.info}">${currentUser.userName}</a>
                    (<a href="@{application.logout()}">Logout</a>)
                #{/if}
                #{if userRole == 'Retailer'}
                    Welcome retailer <a class="connectedUser" href="@{Profile.info}">${currentUser.userName}</a>
                    (<a href="@{application.logout()}">Logout</a>)
                #{/if}
		      </p>
            #{/if}
            #{else}
                <p>
                    <a href="@{Application.register}">Signup</a> | <a href="@{Application.login}">Login</a>
                </p>
            #{/else}
            </div>

            <div class="clearer">&nbsp;</div>

        </div>
        
        #{get 'subnavi' /}

    </div>

    <div id="splash">
        
        *{
            Here you can show success, notice and error messages.
            You can use either flash scope or render scope.
            
            User flash scope (flash.success, flash.put("notice", "Notice message"), 
            flash.error) if you want to display the message on the next request 
            and render scope (renderArgs.put("error", "Error message"))
            if you want to display the message on this request
        }*
        #{if flash.success || success}
        <div class="success">
            ${flash.success ? flash.success : success}
        </div>
        #{/if}
        
        #{if flash.notice || notice}
        <div class="notice">
            ${flash.notice ? flash.notice : notice}
        </div>
        #{/if}
        
        #{if flash.error || error}
        <div class="error">
            ${flash.error ? flash.error : error}
        </div>
        #{/if}

    </div>

    <div class="main" id="#{get 'mainId' /}">

        #{doLayout /}

    </div>

    <div id="footer">

        <div class="left" id="footer-left">
            
            <h3>Club Surfin</h3>

            <p class="quiet"><a href="http://templates.arcsin.se/">Website template</a> by <a href="http://arcsin.se/">Arcsin</a></p>
            
            <div class="clearer">&nbsp;</div>

        </div>

        <div class="right" id="footer-right">

            <p class="large">#{get 'footerNavigation' /}<a href="#top" class="quiet">Page Top &uarr;</a></p>

        </div>

        <div class="clearer">&nbsp;</div>

    </div>

</div>

</body>
</html>